import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { useAuth } from "@/context/AuthContext";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useEffect } from "react";
import { useState } from "react";
import { SkuCard } from "@/types/sku";
import { skuService } from "@/service/skuService";

export default function ShopHome() {
  const { user } = useAuth();



  const [skuList, setSkuList] = useState<SkuCard[]>([]);

  useEffect(() => {
    skuService.getHomepageList(1, 10).then(setSkuList);
  }, []);

  return (
    <div>
      <h1 className="text-2xl font-bold mb-6">欢迎回来，{user?.nickname || "用户"}</h1>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="col-span-2">
          <h2 className="text-xl font-semibold mb-4">推荐商品</h2>
          <div className="grid grid-cols-1 sm:grid-cols-4 gap-[10px]">

            {skuList.map((item) => (
 
              <Card key={item.id} className="w-50 flex flex-col p-0  rounded-2xl ">
                <CardContent className="p-0">
                <img src={item.imageUrl} alt={item.title} className="w-full h-50 rounded-t-2xl" />
                  <div className="p-3 pt-1 pb-2">
                  <h3 className="font-normal text-sm">{item.title}</h3>
                  <div className=" flex justify-between items-center">
                    <span className="text-primary font-bold">¥{item.price}</span>
                    <Link to={`/mall/product/${item.id}`}>
                      <Button size="sm" variant="outline">查看详情</Button>
                    </Link>
                  </div>
                  </div>
                </CardContent>
              </Card>

            ))}
          </div>
        </div>

        <div>
          <h2 className="text-xl font-semibold mb-4">用户中心</h2>
          <Card>
            <CardHeader>
              <CardTitle className="text-lg">快捷导航</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex flex-col gap-2">
                <Link to="/mall/profile" className="text-blue-500 hover:underline">个人信息</Link>
                <Link to="/mall/orders" className="text-blue-500 hover:underline">我的订单</Link>
                <Link to="/mall/cart" className="text-blue-500 hover:underline">购物车</Link>
                <Link to="/mall/notifications" className="text-blue-500 hover:underline">站内通知</Link>
              </div>
            </CardContent>
          </Card>

          <Card className="mt-4">
            <CardHeader>
              <CardTitle className="text-lg">最近浏览</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-sm text-muted-foreground">暂无浏览记录</p>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
} 